<style>
	.fileUpload {
		position: relative;
		overflow: hidden;
		margin: 10px;
	}
	.fileUpload input.upload {
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
		padding: 0;
		font-size: 20px;
		cursor: pointer;
		opacity: 0;
		filter: alpha(opacity=0);
	}
</style>
<div class="panel-body">
<div class="col-lg-3">
	<form>
		<img src="<?php echo base_url()?>tools/images/img-thumb.jpg" id="image-preview" style="max-width:300px;">
		<div class="col-md-offset-12 fileUpload btn btn-primary">
			<span>Upload Foto</span>
			<input type="file" class="upload" onchange="readURL(this);"/>
		</div>
		<input type="submit" class="btn btn-success" id="save-image" value="Simpan">
	</form>
</div>
<div class="col-lg-9">
	<section class="panel">
		<header class="panel-heading font-bold">
			Data Diri
			<a href="<?php echo site_url('smn-admin/ptk_kepsek/edit')?>" class="pull-right btn btn-success btn-xs"><i class="fa fa-edit"></i> Edit Data Diri</a>
		</header>
		<div class="panel-body">
			<form class="form-horizontal" method="get">
				<div class="form-group">
					<label class="col-lg-3 control-label">Nama</label>
					<div class="col-lg-9">
						<p class="form-control-static">Erick Wahyudi Prakoso</p>
					</div>
				</div>                    
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-lg-3 control-label">Tempat, Tanggal Lahir</label>
					<div class="col-lg-9">
						<p class="form-control-static">Surabaya, 9 November 1995</p>
					</div>
				</div>                    
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-lg-3 control-label">Alamat</label>
					<div class="col-lg-9">
						<p class="form-control-static">Bratang Gede Gg.1 No.56 B</p>
					</div>
				</div>  
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-lg-3 control-label">Agama</label>
					<div class="col-lg-9">
						<p class="form-control-static">Islam</p>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-lg-3 control-label">Jenis Kelamin</label>
					<div class="col-lg-9">
						<p class="form-control-static">Laki-laki</p>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-lg-3 control-label">No. Telepon</label>
					<div class="col-lg-9">
						<p class="form-control-static">-</p>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-lg-3 control-label">No. HP</label>
					<div class="col-lg-9">
						<p class="form-control-static">089677223423</p>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-lg-3 control-label">No. Fax</label>
					<div class="col-lg-9">
						<p class="form-control-static">-</p>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-lg-3 control-label">Email</label>
					<div class="col-lg-9">
						<p class="form-control-static">erick.wp.mail@gmail.com</p>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-lg-3 control-label">Status Pernikahan</label>
					<div class="col-lg-9">
						<p class="form-control-static">Lajang</p>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-lg-3 control-label">NIP.</label>
					<div class="col-lg-9">
						<p class="form-control-static">992348823882348</p>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-lg-3 control-label">Jenjang Pendidikan</label>
					<div class="col-lg-9">
						<p class="form-control-static">- SD Al-Ikhlas, Medan</p>
						<p class="form-control-static">- SMP Hang Tuah 1, Surabaya</p>
						<p class="form-control-static">- SMK Negeri 1, Surabaya</p>
						<p class="form-control-static">- S1 Sistem Informasi ITS, Surabaya</p>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-lg-3 control-label">Riwayat Penyakit</label>
					<div class="col-lg-9">
						<p class="form-control-static">- Demam Berdarah</p>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
				<div class="form-group">
					<label class="col-lg-3 control-label">Riwayat Prestasi</label>
					<div class="col-lg-9">
						<p class="form-control-static">- Juara 1 LKS XI Android, Bandung</p>
					</div>
				</div>
				<div class="line line-dashed line-lg pull-in"></div>
			</form>
		</div>
	</section>
</div>
<script>
$(document).ready(function(){
	$('#save-image').hide();
});
function readURL(input) {
	if (input.files && input.files[0]) {
		var reader = new FileReader();

		reader.onload = function (e) {
			$('#image-preview').attr('src', e.target.result);
			$('#save-image').show();
		}

		reader.readAsDataURL(input.files[0]);
	}
}
</script>